import { Search } from "@nutui/icons-react-taro";
import { Input, InputProps } from "@nutui/nutui-react-taro";
import { View } from "@tarojs/components";
import React from "react";
import "./index.scss";

interface SearchInputProps extends Partial<InputProps> {
  /**
   * 输入框高度
   */
  height?: number;
  /**
   * 图标颜色
   */
  iconColor?: string;
}

export const SearchInput = ({
  height = 38,
  iconColor = "#3D91F2",
  readOnly = true,
  ...props
}: SearchInputProps) => {
  return (
    <>
      <View className="search-input" style={{ borderRadius: `${height}px` }}>
        <Search className="icon" color={iconColor} />
        <Input
          className="input"
          readOnly={readOnly}
          {...props}
          style={{ height: `${height}px`, lineHeight: `${height}px` }}
        />
      </View>
    </>
  );
};
